<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   手机： <input type="text" class="myinput" />
   <p class="exchange"></p>
    <script>
        // 表单事件 ：作用于表单上的一些事件 ；
        // 1.表单的聚焦事件 : focus
        // var ele = document.querySelector(".myinput");
        // ele.onfocus = function(){
        //     console.log("聚焦了");
        // }

        // 2.表单的失去焦点 ： blur
        // var ele = document.querySelector(".myinput");
        // ele.onblur = function(){
        //     console.log("失去焦点");
        //     // 获取输入的内容  
        //     var num = this.value;
        //     // console.log(num);
        //     var reg = /^1[3-9]\d{9}$/g;
        //     var pEle = document.querySelector(".exchange");
        //     if(reg.test(num)){
        //         pEle.innerHTML = "输入正确";
        //     }else{
        //         pEle.innerHTML = "输入错误";
        //     }
        //     document.body.appendChild(pEle);
        // }
        

        // 3.输入的时候触发事件 ： input
        // var ele = document.querySelector(".myinput");
        // ele.oninput = function(){
        //     // console.log("输入了内容");
        //     console.log(this.value);
        // }

        // 4.当输入框发生改变的时候触发事件 ： change
        // change需要 满足2个条件才会触发 ： 1.内容改变了 2.失去焦点；
        // var ele = document.querySelector(".myinput");
        // ele.onchange = function(){
        //     console.log("触发了改变事件");
        // } 

    </script>
</body>
</html>